﻿@page "/editors"
@inject SwalService SwalService

<h3>Editor 富文本框</h3>

<h4>将输入的文字转化为 <code>html</code> 代码片段</h4>

<p><code>Editor</code> 组件是对 <a href="https://summernote.org/" target="_blank"><code>Summernote 组件</code></a> 的二次封装，如需使用本地化功能请自行官网下载相对应语言包，自行引用即可</p>

<Block Title="基础用法" Introduction="默认呈现为 <code>div</code> 点击后变为富文本编辑框">
    <p>通过设置 <code>IsEditor</code> 属性值来控制组件默认是 <code>div</code> 还是 <code>editor</code></p>
    <div class="form-control mb-3">我是一个普通的 <code>div</code> 点击无法编辑</div>
    <Editor></Editor>
</Block>

<Block Title="自定义提示信息" Introduction="通过设置 <code>Placeholder</code> 属性来设置空值时的提示消息">
    <p>默认提示是 <b>点击后进行编辑</b></p>
    <Editor Placeholder="自定义空值的提示信息"></Editor>
</Block>

<Block Title="默认显示为富文本编辑框" Introduction="通过设置 <code>IsEditor</code> 属性来设置组件直接显示为富文本编辑框">
    <Editor IsEditor="true"></Editor>
</Block>

<Block Title="自定义高度" Introduction="通过设置 <code>Height</code> 属性来设置组件高度">
    <Editor IsEditor="true" Height="400"></Editor>
</Block>

<Block Title="双向绑定" Introduction="实战中通过双向绑定到 <code>Value</code> 后台自动获取到客户端富文本框编辑内容">
    <p>通过 <code>bind-Value</code> 对 <code>EditorValue</code> 后台属性进行双向绑定，编辑框内进行编辑后点击 <b>完成</b> 按钮，下方文本框内即可显示编辑后结果</p>
    <Editor @bind-Value="@EditorValue" OnValueChanged="@OnValueChanged"></Editor>

    <label class="form-label mt-3">显示编辑内容：</label>
    <textarea class="form-control mt-3">@EditorValue</textarea>
    <div class="mt-3">
        <Button OnClick="SetValue">Reset</Button>
    </div>
</Block>

<Block Title="自定义扩展编辑框按钮" Introduction="通过设置 <code>CustomerPluginItems</code> 属性对编辑框工具栏进行自定义扩展， 通过设置 <code>OnClickPluginItem</code> 回调委托做功能">
    <p>本例中通过扩展 <code>CustomerPluginItems</code> 属性在工具栏中增加了两个按钮，点击按钮弹出 <code>SweetAlert</code> 模态框，点击模态框确认按钮后文本框中插入一段内容</p>
    <Editor IsEditor="true" OnClickButton="@PluginClick" CustomerToolbarButtons="@EditorPluginItems"></Editor>
</Block>

<Block Title="自定义工具栏的富文本编辑框" Introduction="通过设置 <code>ToolbarItems</code> 属性自定义工具栏内容，目前支持的工具栏值请参见 <a href='https://summernote.org/' target='_blank'>Summernote</a> 官网">
    <p>本例中通过设置 <code>ToolbarItems</code> 属性，更改默认可用的工具栏按钮</p>
    <Editor IsEditor="true" ToolbarItems="@ToolbarItems"></Editor>
</Block>

<SweetAlert />

<AttributeTable Items="@GetAttributes()" />
